<template>
  <div class="shop-list-con table-gl-w">
    <div class="search-w">
      <FilterTable :filterItem="filterItem" :isReset="true" @search="searchByVal"> </FilterTable>
    </div>
    <div class="table-gl-con mt10">
      <TableWrap style="flex: 1" @refresh="getList">
        <template #headerLeft>
          <a-space>
            <a-button class="gray-outline" @click="show">认领</a-button>
            <a-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</a-checkbox>
            <div class="clerfix">
              <span>已选</span>
              <span class="highlight ml5">{{ ids.length }}</span>
            </div>
            <a-button type="text" @click="ids = []">清除已选</a-button>
          </a-space>
        </template>
        <template #tableBody>
          <a-spin :loading="loading" :style="{ width: '100%', height: '100%' }">
            <a-scrollbar style="height: 100%; overflow: auto">
              <div class="clearfix" v-if="tableData[0] && !loading">
                <a-checkbox-group v-model="ids">
                  <div class="children fl" v-for="(item, index) in tableData" :key="index">
                    <a-checkbox :value="item.id" class="checkbox" />
                    <div class="img">
                      <a-image @click="showImgList(item)" fit="contain" width="210px" height="210px" :preview="false" :src="getSrc(item)">
                        <template #error>
                          <img style="width: 100%; height: 100%" src="https://cdn2.selleroa.com/saas/product/118310735721069569.png" alt="" />
                        </template>
                      </a-image>
                    </div>
                    <div class="title mt10 mb10">
                      <textLimit :rows="2" position="top" :val="item.spuName"></textLimit>
                    </div>
                    <div class="sub-info clearfix">
                      <div class="fl">
                        <textLimit position="top" :rows="1" :val="item.spu"></textLimit>
                      </div>
                      <div class="fr">
                        <span v-if="item.category" style="background-color: #d8f0ea; color: #059794; max-width: 120px" class="tag-item text-limit">{{ $extract(item, 'category.name') }}</span>
                        <span v-if="item.supplierProductSkuList" style="background-color: #efebfe; color: #6c648b" class="tag-item ml5">变体:{{ $extract(item, 'supplierProductSkuList.length') }}</span>
                      </div>
                    </div>
                    <div class="mt10 mb5" style="border-bottom: 1px solid #ececec"></div>
                    <div class="common-text flex-c">
                      <div style="font-size: 14px">
                        <icon-schedule />
                      </div>
                      <div class="ml5">{{ $setTime(item.gmtCreate) }}</div>
                    </div>
                  </div>
                </a-checkbox-group>
              </div>
              <a-empty v-else />
            </a-scrollbar>
          </a-spin>
        </template>
      </TableWrap>
      <div class="pagination-footer">
        <a-pagination size="mini" :page-size-options="[20, 50, 100, 200, 500]" show-total show-page-size :total="pageNation.total" :default-page-size="pageNation.pageSize" :current="pageNation.pageNum" style="float: right" @page-size-change="sizeChange" @change="changePage" />
      </div>
    </div>
  </div>
  <claim v-model="claimModal" v-if="claimModal" :list="list" @save="getList" />
  <a-image-preview-group v-model:visible="visible" v-model:current="current" infinite :srcList="srcList" />
  <!-- <detail v-if="showDetailModal" v-model="showDetailModal" :info="info" /> -->
</template>

<script lang="ts" setup>
  import { watch, ref, onMounted } from 'vue'
  import { Message } from '@arco-design/web-vue'
  import { getCategoryList, rollPage } from '@/api/product'
  import FilterTable from '@/components/TableFilter.vue'
  import TableWrap from '@/components/TableWrap.vue'
  import claim from './claim.vue'
  import detail from './detail.vue'
  const filterItem: any = ref([
    {
      type: 'input_keyword_type',
      key: 'skuList',
      keyItems: [
        { label: 'SKU', value: 'skuList', isNoFuzzy: true },
        { label: '产品名称', value: 'spuName' },
      ],
      keyWidth: '100',
      value: ref(),
      placeholder: '请输入',
      label: 'SKU',
      width: 260,
      isMultiple: true,
    },
    {
      type: 'cascader',
      key: 'categoryIdList',
      optionItems: [],
      keyWidth: '120',
      value: ref(),
      placeholder: '商品分类',
      label: '类目',
      width: 200,
      isMultiple: true,
    },
  ])
  let tableData: any = ref([])
  let loading = ref(false)
  let current = ref(0)
  let claimModal = ref(false)
  let visible = ref(false)
  let ids = ref([])
  let srcList = ref([])
  let checkAll = ref(false)
  let searchValue = ref({})
  let info = ref({})
  let list: any = ref([])
  let pageNation = ref({ total: 0, pageNum: 1, pageSize: 20 })

  // 显示弹框
  const show = () => {
    if (!ids.value[0]) return Message.error('请选择要认领的产品')
    list.value = []
    ids.value.forEach((e: string) => {
      let item = tableData.value.find((el: any) => el.id == e)
      if (item) list.value.push(item)
    })
    claimModal.value = true
  }

  // 搜索
  const searchByVal = (info: any) => {
    searchValue.value = info
    getList()
  }
  // 分页
  const changePage = (val: number) => {
    pageNation.value.pageNum = val
    getList()
  }

  const sizeChange = (val: number) => {
    pageNation.value.pageNum = 1
    pageNation.value.pageSize = val
    getList()
  }

  const getList = async () => {
    let params: any = {
      ...searchValue.value,
      needCount: true,
      status: 'sharing',
      pageNum: pageNation.value.pageNum,
      pageSize: pageNation.value.pageSize,
    }

    if (params.categoryIdList) {
      params.categoryIdList = params.categoryIdList.split(',')
    } else {
      delete params.categoryIdList
    }

    console.log(params)

    if (params.keywordType && params.keywordType == 'skuList') {
      params.keyword ? (params[params.keywordType] = params.keyword.split(',')) : delete params.skuList
      delete params.searchType
      delete params.keyword
      delete params.keywordType
    }

    loading.value = true
    const res: any = await rollPage(params)
    loading.value = false
    if (res) {
      ids.value = []
      tableData.value = res.data?.list || []
      pageNation.value.total = res.data.total
    }
  }

  const getCategory = async () => {
    const res: any = await getCategoryList()
    filterItem.value[1].optionItems = res.data
  }

  const getSrc = (data: any) => {
    let arr = data?.productPicList || []
    if (arr.length > 0) {
      return arr[0].url
    } else {
      return ''
    }
  }

  const handleCheckAllChange = (type: boolean) => {
    type ? (ids.value = tableData.value.map((e: any) => e.id)) : (ids.value = [])
  }

  const showImgList = (data: any) => {
    console.log(data)
    let arr = data?.productPicList || []
    srcList.value = arr.map((e: any) => e.url)
    visible.value = true
  }

  watch(
    () => ids,
    () => {
      checkAll.value = ids.value.length == tableData.value.length
    },
    {
      deep: true,
    }
  )

  onMounted(() => {
    getCategory()
    getList()
  })
</script>

<style lang="less" scoped>
  :deep(.arco-scrollbar) {
    height: 100%;
  }

  .shop-list-con {
    height: calc(100vh - @menuAndTabHeight);
  }

  .children {
    position: relative;
    width: 210px;

    height: 330px;
    background-color: #fff;
    box-shadow: 0 0 4px 1px #eee;
    border-radius: 4px;
    margin: 0 10px 10px 0;
    overflow: hidden;
    .checkbox {
      position: absolute;
      top: 10px;
      left: 10px;
      z-index: 1;
    }
    .img {
      width: 100%;
      height: 210px;
    }
    .title {
      height: 40px;
      font-size: 12px;
    }

    .sub-info {
      padding: 0 5px;
      font-size: 12px;
      .tag-item {
        padding: 5px;
        border-radius: 5px;
      }
    }
  }
</style>
